<!-- Head.vue -->
<template>
  <div class="header-container">
    <div class="header-left">
      <i class="el-icon-fold toggle-sidebar" @click="toggleSidebar"></i>
     <img src="../../assets/image.png" alt="logo" width="50" height="50"> 
      <span class="page-title">{{ currentPageTitle }}</span>
    </div>
    <div class="header-right">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          管理员<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="profile">个人资料</el-dropdown-item>
          <el-dropdown-item command="settings">设置</el-dropdown-item>
          <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AdminHeader',
  data() {
    return {
      currentPageTitle: '神龙拯救队之元气星魂'
    };
  },
  methods: {
    toggleSidebar() {
      this.$emit('toggle-sidebar');
    },
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$router.push('/admin/profile');
          break;
        case 'settings':
          this.$router.push('/admin/settings');
          break;
        case 'logout':
          // 处理退出登录逻辑
          this.$message.success('已退出登录');
          this.$router.push('/login');
          break;
      }
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left {
  display: flex;
  align-items: center;
}

.toggle-sidebar {
  font-size: 20px;
  cursor: pointer;
  margin-right: 20px;
}

.page-title {
  font-size: 18px;
  font-weight: bold; /* 保留并强化加粗效果 */
  /* 多色文本阴影叠加，形成五彩斑斓视觉 */
  text-shadow: 
    0 0 2px #ff0000,   /* 红色光晕 */
    0 0 4px #00ff00,   /* 绿色光晕 */
    0 0 6px #0000ff,   /* 蓝色光晕 */
    0 0 8px #ffff00,   /* 黄色光晕 */
    0 0 10px #ff00ff;  /* 紫色光晕 */
}

.header-right .el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

/* 清除浮动的通用类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>
